<script type="text/javascript">
(function(){
	var onlineListObj = $("#onlineList");
	var offlineListObj = $("#offlineList");
	var forbidListObj = $("#forbidList");

	var bEditing = false;

	<%
		local para = {device_manage = {client_list = {}}}
		local result = tpl_get_data(para, true)
		local remote_ip = luci.http.getenv("REMOTE_ADDR")
	-%>

	var info = <%=result%>;
	var curIp = "<%=remote_ip%>";
	var clients = info[K_MODULE].device_manage.client_list;
	var currentState = stateman.current.name;

	function initOnlineEntry(client, idx){
		var devName = htmlEscape(client.name);
		var upSpeed = netSpeedTrans(client.upload_speed);
		var downSpeed = netSpeedTrans(client.download_speed);
		var icon;

		if(client.brand){
			icon = "icon_" + getAlias(client.brand);
		}else{
			icon = "icon_" + getVendor(client.mac);
		}

		var time = timeTrans(client.online_time);

		var upSpeedStr = '<i class="icon_speed_up"></i>' + upSpeed;
		var downSpeedStr = '<i class="icon_speed"></i>' + downSpeed;

		var upLimitStr;
		if (0 == client.upload_limit){
			upLimitStr = '<input class="unlimit up" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			upLimitStr = '<span class="limited up">' + client.upload_limit + 'KB/s</span>';
		}

		var downLimitStr;
		if (0 == client.download_limit){
			downLimitStr = '<input class="unlimit down" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			downLimitStr = '<span class="limited down">' + client.download_limit + 'KB/s</span>';
		}

		var accessWayStr = "";
		var devType = parseInt(client.device_type, 10);
		switch(devType){
		case 0:
			accessWayStr = '<p><i class="icon_lan"></i>LAN</p>';

			// 暂不支持有线设备上下行速率的统计
			//upSpeedStr = '<i class="icon_speed_up invisible"></i>----';
			//downSpeedStr = '<i class="icon_speed invisible"></i>----';
			break;
		case 1:
			accessWayStr = '<p><i class="icon_wifi_signal_three"></i>2.4G</p>';
			break;
		case 2:
			accessWayStr = '<p><i class="icon_wifi_signal_three"></i>5G</p>';
			break;
		case 3:
			accessWayStr = '<p><i class="icon_visitor"></i>{%label.guest%}</p>';
			break;
		default:
			break;
		}

		var switchStr;
		if (curIp == client.ip){
			switchStr = '<span class="self-host">{%label.selfHost%}</span>';
		}else{
			switchStr = '<span class="switch internet-switch" data-switch="1"><i class="switch-circle"></i></span>';
		}

		return '<ul class="list" data-index="' + idx + '">' +
					'<li class="device-name">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<div class="dev-name">' +
							'<p class="dev-name" title="' + devName + '">' + devName + '</p>' +
							'<p class="time">' + time + '</p>' +
						'</div>' +
					'</li>' +
					'<li class="ip-mac">' +
						'<p>IP:' + client.ip + '</p>' +
						'<p class="mac-color">MAC:' + client.mac + '</p>' +
					'</li>' +
					'<li class="speed">'+
						'<p>' + upSpeedStr + '</p>' +
						'<p>' + downSpeedStr + '</p>' +
					'</li>' +
					'<li class="speed-limit">' +
						'<p><i class="icon_speed_up"></i>' + upLimitStr + '</p>' +
						'<p><i class="icon_speed"></i>' + downLimitStr + '</p>' +
					'</li>' +
					'<li class="access-way">' + accessWayStr + '</li>' +
					'<li class="allow-internet"><p>' + switchStr + '</p></li>' +
				'</ul>';
	}

	function initOfflineEntry(client, idx){
		var devName = htmlEscape(client.name);
		var icon;

		if(client.brand){
			icon = "icon_" + getAlias(client.brand);
		}else{
			icon = "icon_" + getVendor(client.mac);
		}

		var upLimitStr;
		if (0 == client.upload_limit){
			upLimitStr = '<input class="unlimit up" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			upLimitStr = '<span class="limited up">' + client.upload_limit + 'KB/s</span>';
		}

		var downLimitStr;
		if (0 == client.download_limit){
			downLimitStr = '<input class="unlimit down" maxLength="4" placeholder="{%label.unlimitSpeed%}" />';
		}else{
			downLimitStr = '<span class="limited down">' + client.download_limit + 'KB/s</span>';
		}

		return '<ul class="list" data-index="' + idx + '">' +
					'<li class="device-name">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<div class="dev-name">' +
							'<p class="dev-name" title="' + devName + '">' + devName + '</p>' +
						'</div>' +
					'</li>' +
					'<li class="ip-mac"><p class="mac-color">MAC:' + client.mac + '</p></li>' +
					'<li class="speed"><p class="disable">----</p><p class="disable">----</p></li>' +
					'<li class="speed-limit">' +
						'<p><i class="icon_speed_up"></i>' + upLimitStr + '</p>' +
						'<p><i class="icon_speed"></i>' + downLimitStr + '</p>' +
					'</li>' +
					'<li class="access-way"><p>{%label.offline%}</p></li>' +
					'<li class="allow-internet"><p><span class="switch internet-switch" data-switch="1"><i class="switch-circle"></i></span></p></li>' +
				'</ul>';
	}

	function initForbidEntry(client, idx){
		var devName = htmlEscape(client.name);
		var icon;

		if(client.brand){
			icon = "icon_" + getAlias(client.brand);
		}else{
			icon = "icon_" + getVendor(client.mac);
		}

		return '<ul class="list" data-index="' + idx + '">' +
					'<li class="device-name">' +
						'<i class="vendor-icon ' + icon + '"></i>' +
						'<div class="dev-name">' +
							'<p class="dev-name" title="' + devName + '">' + devName + '</p>' +
						'</div>' +
					'</li>' +
					'<li class="ip-mac"><p class="mac-color">MAC:' + client.mac + '</p></li>' +
					'<li class="speed"><p class="disable">----</p><p class="disable">----</p></li>' +
					'<li class="speed-limit"><p class="disable">----</p><p class="disable">----</p></li>' +
					'<li class="access-way"><p>{%label.forbided%}</p></li>' +
					'<li class="allow-internet"><p><span class="switch internet-switch" data-switch="0"><i class="switch-circle"></i></span></p></li>' +
				'</ul>';
	}

	function initSwitchList(filter, callback){
		$(filter).each(function(){
			var state = $(this).attr("data-switch");
			if (1 == state){
				$(this).attr("data-value", "1").css({textAlign: "right", backgroundColor: "#FE9818"});
			}else{
				$(this).attr("data-value", "0").css({textAlign: "left", backgroundColor: "#B2B2B2"});
			}
		}).click(function(){
			var idx = parseInt($(this).parents("ul.list").attr("data-index"), 10);
			var state = $(this).attr("data-value");

			if (0 == state){
				$(this).attr("data-value", "1").css({textAlign: "right", backgroundColor: "#FE9818"});
				callback && callback(1, idx);
			}else{
				$(this).attr("data-value", "0").css({textAlign: "left", backgroundColor: "#B2B2B2"});
				callback && callback(0, idx);
			}
		});
	};

	function onNetSwitchClick(val, idx){
		var data = {};
		var para = {};

		bEditing = true;

		para.device_manage = {};
		para.device_manage.client_list = data;

		data.mac = clients[idx].mac;
		data.name = clients[idx].name;
		data.internet_enable = val;

		apiSet(para, function(ret){
			bEditing = false;
		});
	}

	var speedBindEvt = {
		focus:function(){
			bEditing = true;
		},
		keyup:function(event){
			if (event.keyCode == "13") {
				$(this).blur();
			}
		},
		blur:function(){
			var idx = parseInt($(this).parents("ul.list").attr("data-index"), 10);
			var speed = $(this).val() || "0";
			var para = {};
			var data = {};

			if (!checkNum(speed) || !checkNumRange(speed, 4096, 0)){
				bEditing = false;
				showAlert(errStr.speedInv);
				return;
			}

			if ($(this).hasClass("up")){
				data.upload_limit = speed;
			}else{
				data.download_limit = speed;
			}

			para.device_manage = {};
			para.device_manage.client_list = data;

			data.mac = clients[idx].mac;
			data.name = clients[idx].name;

			apiSet(para, function(ret){
				bEditing = false;
			});
		}
	};

	var nameBindEvt = {
		focus:function(){
			bEditing = true;
		},
		keyup:function(event){
			if (event.keyCode == "13") {
				$(this).blur();
			}
		},
		blur:function(){
			var idx = parseInt($(this).parents("ul.list").attr("data-index"), 10);
			var devName = $(this).val();
			var para = {};
			var data = {};

			if (0 == devName.length){
				bEditing = false;
				showAlert(errStr.devNameEpty);
				return;
			}

			if (getCNStrLen(devName) > 32){
				bEditing = false;
				showAlert(errStr.devNameTooLong);
				return;
			}

			para.device_manage = {};
			para.device_manage.client_list = data;

			data.mac = clients[idx].mac;
			data.name = devName;

			apiSet(para, function(ret){
				bEditing = false;
			});
		}
	};

	function initList(clients){
		onlineListObj.empty();
		offlineListObj.empty();
		forbidListObj.empty();

		var len = clients.length;
		for (var i = 0; i < len; i++){
			if (0 == clients[i].internet_enable) {
				forbidListObj.append(initForbidEntry(clients[i], i));
			}else{
				if (1 == clients[i].online_status){
					onlineListObj.append(initOnlineEntry(clients[i], i));
				}else{
					offlineListObj.append(initOfflineEntry(clients[i], i));
				}
			}
		}

		initSwitchList("span.internet-switch", onNetSwitchClick);

		$("input.unlimit").bind(speedBindEvt);

		$("span.limited").click(function(){
			bEditing = true;

			var speed = $(this).text().replace(/[^0-9]/gi,"");

			var $input;
			if ($(this).hasClass("up")){
				$input = $('<input class="unlimit up" maxLength="4" placeholder="{%label.unlimitSpeed%}" />');
			}else{
				$input = $('<input class="unlimit down" maxLength="4" placeholder="{%label.unlimitSpeed%}" />');
			}

			$(this).replaceWith($input);
			$input.bind(speedBindEvt).val(speed).focus();
		});

		$("p.dev-name").click(function(){
			bEditing = true;

			var name = $(this).text();
			var $input = $('<input class="name-set" maxLength="32" />');

			$(this).html($input).unbind("click");
			$input.bind(nameBindEvt).val(name).focus();
		});
	}

	function refreshDevList(){
		var data = {
			device_manage:{client_list:null}
		};

		apiGet(data, function(result){
			if (currentState != stateman.current.name){
				return;
			}

			if (!bEditing){
				var errNo = result[ERR_CODE];

				if (E_NONE == errNo){
					clients = result[K_MODULE]["device_manage"]["client_list"];
					initList(clients);
				}else{
					console.log(result);
				}
			}

			$.setTimeout(refreshDevList, 1000);
		});
	}

	initList(clients);
	$.setTimeout(refreshDevList, 1000);
})();
</script>
<style type="text/css">
	div.device-list{
		margin:0 50px;
	}
	ul.list-head{
		padding:25px 0px 25px;
		border-bottom:2px solid #FF8000;
	}
	ul.list-head li{
		display:inline-block;
		font-size:15px;
		color:#4F5356;
	}
	ul.list{
		padding:10px 0;
		border-bottom:1px solid #DDD;
	}
	ul.list:last-child{
		border-bottom:1px solid #e7e7e7;
	}
	ul.list:hover{
		background-color:#F5F5F5;
	}
	ul.list li{
		display:inline-block;
		font-size:14px;
		color:#4F5356;
		vertical-align:middle;
	}
	li.device-name{
		width:25%;
	}
	li.ip-mac{
		width:25%;
	}
	li.speed{
		width:15%;
	}
	li.speed-limit{
		width:15%;
	}
	li.access-way{
		width:10%;
	}
	li.allow-internet{
		text-align:right;
		width:10%;
	}
	li.allow-internet p{
		text-align:right;
		margin-right:10px;
	}
	li.allow-internet span.switch{
		margin-right:0;
	}
	li.allow-internet span.self-host{
		color:#3050F3;
		font-weight:bold;
		margin-right:10px;
	}
	li.txt-indent-little{
		text-indent:0.5em
	}
	i.vendor-icon{
		font-size:48px;
		display:inline-block;
		width:50px;
		height:50px;
		margin-right:10px;
		margin-top:5px;
	}
	div.dev-name{
		display:inline-block;
		vertical-align:top;
	}
	ul.list p{
		height:30px;
		vertical-align:bottom;
		line-height:30px;
	}
	p.dev-name{
		cursor:pointer;
		width:150px;
		line-height:25px;
		vertical-align:bottom;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	p.time{
		color:#767D82;
		width:150px;
		height:25px;
		vertical-align:bottom;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	i.icon_speed_up{
		font-size:20px;
		vertical-align:middle;
		color:#27C72F;
	}
	i.icon_speed{
		font-size:20px;
		vertical-align:middle;
		color:#288BC4;
	}
	li.access-way i{
		font-size:22px;
		margin-right:5px;
		vertical-align:middle;
	}
	input.unlimit, input.name-set{
		color:#767D82;
		line-height:20px;
		padding:0 0.25em;
		border-radius:2px;
		border:0;
		border-bottom:1px solid #DDD;
	}
	li.speed-limit input.unlimit{
		width:3em;
	}
	li.device-name input.name-set{
		width:150px;
	}
	span.limited{
		cursor:pointer;
		color:#FF7A01;
		vertical-align:bottom;
	}
	p.disable{
		height:25px;
		margin-left:22px;
		vertical-align:bottom;
	}
	#forbidList ul.list li, #offlineList ul.list li{
		color:#767D82;
	}
	#forbidList p.dev-name, #offlineList p.dev-name{
		line-height:50px;
		height:50px;
	}
	p.mac-color{
		color:#909396;
	}
	/*1080p适配*/
	@media screen and (min-device-width:1920px){
		ul.list-head{
			padding:35px 0;
		}
		ul.list{
			padding:17px 0;
		}
		ul.list-head li,
		ul.list li{
			font-size: 18px;
		}
		i.icon_speed_up,
		i.icon_speed{
			font-size:24px;
		}
		li.access-way i{
			font-size:26px;
		}
		input.unlimit, input.name-set{
			line-height:24px;
		}
	}
</style>
<div class="help hidden">
	<ul class="help-content">
		<li class="summary">{%helpStr.deviceMng%}</li>
		<li class="title">{%helpStr.forbidInternet%}</li>
		<li class="content">{%helpStr.forbidInternetTip%}</li>
		<li class="title">{%helpStr.rename%}</li>
		<li class="content">{%helpStr.renameTip%}</li>
		<li class="title">{%helpStr.speedLimit%}</li>
		<li class="content">{%helpStr.speedLimitTip%}</li>
	</ul>
</div>
<div class="device-list below-head">
	<ul class="list-head">
		<li class="device-name txt-indent-little">{%label.deviceName%}</li>
		<li class="ip-mac">{%label.ipAndMac%}</li>
		<li class="speed txt-indent-little">{%label.curSpeed%}</li>
		<li class="speed-limit txt-indent-little">{%label.limitSpeed%}</li>
		<li class="access-way">{%label.accessWay%}</li>
		<li class="allow-internet">{%label.allowInternet%}</li>
	</ul>
	<div id="onlineList"></div>
	<div id="offlineList"></div>
	<div id="forbidList"></div>
</div>
